/**
 * 响应式工具函数
 *
 * 提供基于设计Token的响应式样式工具
 */

import { breakpoints, spacing, fontSize } from './design-tokens';

/**
 * 生成媒体查询字符串
 */
export const mediaQuery = {
  mobile: `@media (max-width: ${breakpoints.mobile - 1}px)`,
  tablet: `@media (min-width: ${breakpoints.mobile}px) and (max-width: ${breakpoints.tablet - 1}px)`,
  desktop: `@media (min-width: ${breakpoints.tablet}px)`,
  wide: `@media (min-width: ${breakpoints.wide}px)`,

  // 自定义断点
  up: (bp: number) => `@media (min-width: ${bp}px)`,
  down: (bp: number) => `@media (max-width: ${bp - 1}px)`,
  between: (min: number, max: number) => `@media (min-width: ${min}px) and (max-width: ${max - 1}px)`,
} as const;

/**
 * 获取响应式间距
 *
 * @param isMobile - 是否为移动端
 * @param size - 间距大小
 * @returns 间距值（px）
 */
export const getResponsiveSpacing = (
  isMobile: boolean,
  size: keyof typeof spacing.mobile | keyof typeof spacing.desktop
): number => {
  if (isMobile) {
    return spacing.mobile[size as keyof typeof spacing.mobile] || spacing.mobile.md;
  }
  return spacing.desktop[size as keyof typeof spacing.desktop] || spacing.desktop.md;
};

/**
 * 获取响应式字体大小
 *
 * @param isMobile - 是否为移动端
 * @param size - 字体大小
 * @returns 字体样式对象
 */
export const getResponsiveFontSize = (
  isMobile: boolean,
  size: keyof typeof fontSize.mobile | keyof typeof fontSize.desktop
): { fontSize: string; lineHeight: string } => {
  if (isMobile) {
    const fontConfig = fontSize.mobile[size as keyof typeof fontSize.mobile];
    return {
      fontSize: fontConfig?.size || fontSize.mobile.base.size,
      lineHeight: fontConfig?.lineHeight || fontSize.mobile.base.lineHeight,
    };
  }

  const fontConfig = fontSize.desktop[size as keyof typeof fontSize.desktop];
  return {
    fontSize: fontConfig?.size || fontSize.desktop.base.size,
    lineHeight: fontConfig?.lineHeight || fontSize.desktop.base.lineHeight,
  };
};

/**
 * 生成响应式容器样式
 *
 * @param maxWidth - 最大宽度
 * @param padding - 水平内边距
 * @returns CSS样式对象
 */
export const getResponsiveContainerStyle = (
  maxWidth?: string | number,
  padding?: string | number
): React.CSSProperties => {
  return {
    width: '100%',
    maxWidth: maxWidth || '1280px',
    margin: '0 auto',
    padding: padding || '0 24px',
  };
};

/**
 * 检查触摸目标尺寸是否合规
 *
 * @param size - 触摸目标尺寸
 * @param minSize - 最小尺寸（默认44px）
 * @returns 是否合规
 */
export const isTouchTargetValid = (size: number, minSize = 44): boolean => {
  return size >= minSize;
};

/**
 * 生成触摸友好的按钮样式
 *
 * @param size - 按钮尺寸（small | medium | large）
 * @returns CSS样式对象
 */
export const getTouchFriendlyButtonStyle = (
  size: 'small' | 'medium' | 'large' = 'medium'
): React.CSSProperties => {
  const sizes = {
    small: { height: 36, padding: '0 12px', fontSize: '14px' },
    medium: { height: 44, padding: '0 16px', fontSize: '16px' },
    large: { height: 52, padding: '0 24px', fontSize: '18px' },
  };

  return {
    minHeight: sizes[size].height,
    minWidth: sizes[size].height,
    padding: sizes[size].padding,
    fontSize: sizes[size].fontSize,
    cursor: 'pointer',
    userSelect: 'none',
    WebkitTapHighlightColor: 'transparent',
  };
};

/**
 * 移动端安全区域适配
 *
 * 支持iPhone刘海屏等安全区域
 */
export const safeAreaInsets = {
  top: 'env(safe-area-inset-top)',
  right: 'env(safe-area-inset-right)',
  bottom: 'env(safe-area-inset-bottom)',
  left: 'env(safe-area-inset-left)',
} as const;

/**
 * 生成带安全区域的内边距
 *
 * @param basePadding - 基础内边距
 * @returns CSS padding字符串
 */
export const getPaddingWithSafeArea = (basePadding: string = '16px'): string => {
  return `calc(${basePadding} + ${safeAreaInsets.top}) calc(${basePadding} + ${safeAreaInsets.right}) calc(${basePadding} + ${safeAreaInsets.bottom}) calc(${basePadding} + ${safeAreaInsets.left})`;
};
